<template>
	<view class="box">
		<view class="header">
      <view class="title">
        我的
        <view @click="show = true" class="quit">退出</view>
      </view>
      <view class="user-info">
        <image class="user-img" :src="require('@/static/image/my/user.png')"></image>
        <view class="user-phone">{{userInfo.userPhone}}</view>
        <view class="user-type">{{userInfo.isPay === '1' ? '会员已开通' :'会员未开通'}}</view>
      </view>
    </view>
    <view class="tools">
      <view @click="handleToPage(index)" :key="index" v-for="(item,index) in tools" class="tool-item">
        <image class="tool-img" :src="require(`@/static/image/my/tool${index+1}.png`)"></image>
        <view>{{item}}</view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <u-modal v-model="show" @confirm="handleLogout" show-cancel-button content="是否退出？"></u-modal>
	</view>
</template>

<script>
import {getUserInfo} from "@/cookie";

export default {
  data(){
    return{
      tools:[
        '进度查询','银行卡绑定','投诉建议','在线客服','查看协议','关于我们'
      ],
      userInfo:{},
      show:false
    }
  },
  onShow() {
    this.userInfo = getUserInfo()
  },
  methods:{
    handleToPage(idx){
      if( !this.userInfo.isPay || this.userInfo.isPay === '0' ){
        if(idx !== 0 && idx !== 5){
          uni.navigateTo({
            url:'pages/user/order'
          })
          return
        }
      }

      switch (idx) {
        case 0:
          uni.navigateTo({
            url:'pages/user/order'
          })
          break;
        case 1:
            uni.showToast({
              title:"正在开发",
              icon:"none"
            })
          break;
        case 2:
          uni.navigateTo({
            url:"pages/user/complaint"
          })
          break;
        case 3:
          uni.navigateTo({
            url:"pages/user/kefu"
          })
          break;
        case 4:
          uni.navigateTo({
            url:"pages/user/protocolList"
          })
          break;
        case 5:
          uni.navigateTo({
            url:'pages/user/about'
          })
          break;
      }
    },
    handleLogout(){
      this.$store.dispatch('logout').then(e=>{
        uni.switchTab({
          url:'/pages/index/index'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  width: 100%;
  height: 800rpx;
  background: url("../../static/image/my/my-header.png") 0/cover no-repeat;
  .title{
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    padding-top: 6vh;
  }
  .quit{
    position: absolute;
    right: 50rpx;
    top: 6vh;
    font-size: 24rpx;
  }
  .user-info{
    text-align: center;
    padding-top: 50rpx;
    .user-img{
      width: 150rpx;
      height: 150rpx;
    }
    .user-phone{
      color: #fff;
      font-size: 36rpx;
      margin-top: 30rpx;
    }
    .user-type{
      color: #fff;
    }
  }
}
.tools{
  display: flex;
  flex-wrap: wrap;
  width: 660rpx;
  margin: -300rpx auto 0;
  background-color: #fff;
  padding: 40rpx 0;
  border-radius: 50rpx;
  box-shadow: 0 0 40rpx 15rpx rgba(0,0,0,.05);
  .tool-item{
    width: 220rpx;
    text-align: center;
    margin-bottom: 40rpx;
      .tool-img{
        width: 100rpx;
        height: 100rpx;
      }
  }
}
</style>
